<template>
  <div>
    <el-dialog 
      width="1100px"
      :title="$t('代理商列表')"
      :visible.sync="isShow"
      :close-on-click-modal="false"
    >
      <div class="head_search u-fw" v-if="memusid!=5">
        <div class="ipt_box">
          <p class="label font14 text_black">{{$t('代理商名称')}}：</p>
          <el-input
            v-model="agent_name"
            :placeholder="$t('请输入代理商名称')"
          ></el-input>
        </div>
        <div class="ipt_box" style="width: 260px;">
          <p class="label font14 text_black">{{$t('手机号')}}：</p>
          <el-input v-model="phone" :placeholder="$t('请输入手机号')"></el-input>
        </div>
        <div class="select_box">
          <p class="label font14 text_black">{{$t('代理商状态')}}：</p>
          <el-select
            v-model="agentStatusVal"
            :placeholder="$t('请选择')"
            @change="changeAgentStatus"
          >
            <el-option
              v-for="item in agentStatusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">
          {{$t('搜索')}}
        </button>
      </div>

      <div class="table_box">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" :label="$t('代理商名称')">
            <template slot-scope="{ row }">
              <span class="text_blue" v-if="row.id == -1">{{row.name}}</span>
              <span class="text_black" v-if="row.id != -1">{{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            :label="$t('手机号')"
            width="110"
          ></el-table-column>
          <el-table-column
            prop="parent_name"
            :label="$t('上级代理')"
          ></el-table-column>
          <el-table-column
            prop="brokerage"
            :label="$t('佣金比例')"
            width="100"
          >
            <template slot-scope="{ row }">
              <span v-if="row.id != -1">{{row.brokerage}}%</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            :label="$t('用户状态')"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="open_lock"
            :label="$t('是否可开锁')"
            width="120"
          >
            <template slot-scope="{ row }">
              <span v-if="row.open_lock == 0">{{$t('否')}}</span>
              <span v-if="row.open_lock == 1">{{$t('是')}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" width="100">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleChange(scope.row)"
                >{{$t('选择')}}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination_box ">
          <el-pagination
            background
            
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="page_size"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from '@/assets/js/util.js'
export default {
  name: "agentList",
  data() {
    let that = this
    return {
      page: 1,
      page_size: 20,
      total: 0,
      isShow: false,
      agent_name: "",
      phone: "",
      agentStatusArr: [
        {
          value: 0,
          label: that.$t('选择代理商状态')
        },
        {
          value: 1,
          label: that.$t('正常')
        },
        {
          value: 2,
          label: that.$t('禁用')
        }
      ],
      agentStatusVal: 0,
      tableData: [],
    };
  },
  props: {
    type: {
      type: [Number, String],
      default: 1
    },
    memusid: {
      type: [Number, String],
      default: 1
    },
    uid:{
      type: [Number, String],
      default: 0
    }
  },
  mounted() {},
  methods: {
    show() {
      this.agent_name = ''
      this.phone = ''
      this.agentStatusVal = 0
      this.page = 1
      this.page_size = 20
      this.isShow = true;
      //判断一下
      if(this.memusid==5){
        console.log("走这里吗？")
        setTimeout(() => {
          this.getData1();
        }, 150);
      }else{
        setTimeout(() => {
          this.getData();
        }, 150);
      }
    },
    getData(type) {
      if(type == 'search') { this.page = 1 }
      util.$http('/agency/agencyDialog?page=' + this.page, {
        page_size: this.page_size,
        name: this.agent_name,
        phone: this.phone,
        status: this.agentStatusVal,
      })
      .then(res=>{
        if(res.code == 1) {
          let obj = {
            id: -1,
            name: this.$t('平台自营'),
            phone: '',
            parent_name: '',
            brokerage: '',
            status: '正常',
            open_lock: 1,
          }
          let arr = [obj, ...res.data.list]
          this.total = res.data.total
          this.tableData = arr
        }
      })
    },

    getData1(type) {
      if(type == 'search') { this.page = 1 }
      util.$http('/agency/agencyDialog1?page=' + this.page, {
        page_size: this.page_size,
        name: this.agent_name,
        phone: this.phone,
        status: this.agentStatusVal,
        uid:this.uid,
      })
      .then(res=>{
        if(res.code == 1) {
          // let obj = {
          //   id: -1,
          //   name: this.$t('平台自营'),
          //   phone: '',
          //   parent_name: '',
          //   brokerage: '',
          //   status: '正常',
          //   open_lock: 1,
          // }
          let arr = [...res.data.list]
          this.total = res.data.total
          this.tableData = arr
        }
      })
    },


    handleCurrentChange(val) {
      this.page = Number(val)
      this.getData()
    },
    changeAgentStatus(val) {
      this.agentStatusVal = val;
    },
    handleChange(row) {
      this.isShow = false;
      this.agent_name = ''
      this.phone = ''
      this.agentStatusVal = 0
      this.$emit('hide', row, this.type)
    }
  }
};
</script>

<style scoped>
.head {
  padding: 20px 20px 30px;
}
.head .icon_box {
  display: inline-block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.head_search {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 20px;
}
.head_search .ipt_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 290px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 290px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.table_box {
  padding: 0 20px;
}
.pagination_box {
  padding: 30px 0;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
